<template>
    <!-- 商品列表 -->
    <van-tree-select v-model:main-active-index="activeIndex" height="126vw" :items="items" @click-nav="clickNav">
        <template #content>

            <!-- 人气top -->
            <div class="topTittle" v-if="activeIndex === 0">
                <p>人气top</p>
                <div class="line"></div>
            </div>
            <!-- 大师咖啡 -->
            <div class="topTittle" v-if="activeIndex === 1">
                <p>大师咖啡</p>
                <div class="line"></div>
            </div>
            <!-- 拿铁咖啡 -->
            <div class="topTittle" v-if="activeIndex === 2">
                <p>拿铁咖啡</p>
                <div class="line"></div>
            </div>
            <!-- 瑞纳冰 -->
            <div class="topTittle" v-if="activeIndex === 3">
                <p>瑞纳冰</p>
                <div class="line"></div>
            </div>


            <van-card v-for="(item, index) in goodsList" :price="item.price" :desc="item.dec" :title="item.goods"
                tag="充2赠1" :thumb="item.img" @click="showPopup(item.price,item.goods,item.config,item.proId)">
                <template #tags>
                    <p>{{item.config}}</p>
                </template>
                <template #bottom>
                    <van-button icon="plus" type="primary" size="mini" round class="addCartBtn" color="#88afd5" />
                </template>
            </van-card>

        </template>
    </van-tree-select>
    <!-- 弹出层 -->
    <PopupVue v-model:show="show" :popPrice="popPrice" :popGoods="popGoods" :popConfig="popConfig" :popProId="popProId"></PopupVue>
</template>

<script setup>

// 引入弹出层子组件
import PopupVue from './Popup.vue';

// 引入hooks
import { useSelectGoods } from '../../hooks/useGoodsList'

const { activeIndex, items, goodsList, show, popPrice,popGoods,popConfig,popProId,showPopup, clickNav } = useSelectGoods()
</script>

<style lang="scss" scoped>
.van-tree-select {
    width: 100%;
    flex: 1;

    .van-tree-select__nav {
        flex: 0.7;
    }

    .topTittle {
        width: 100%;
        height: 20px;
        // background-color: pink;
        display: flex;
        line-height: 20px;
        margin-top: 10px;
        color: #383838;
        font-size: 13px;

        .line {
            width: 170px;
            height: 1px;
            background-color: #f2f2f2;
            margin-left: 10px;
            margin-top: 10px;
        }
    }

    .van-card {
        width: 255px;
        height: 80px;
        margin-bottom: 10px;
        border-bottom: 1px solid #f2f2f2;
        box-sizing: initial;
        --van-card-thumb-size: 70px;
        --van-card-background: #fff;
        --van-card-price-integer-font-size: 15px;

        .van-card__thumb {
            width: 70px;
            height: 70px;
        }

        p {
            color: #a6a6a6;
        }

        .addCartBtn {
            width: 15px;
            height: 15px;
            left: 80px;
            bottom: 5px;
            // margin-left: 55px;
        }
    }

}
</style>